<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" type="image/png" href="/blog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#35495e">
  <meta name="description" content="小菜头的博客，主要记录学习笔记，包含：html,css,javascript,jQuery,vue等">
  <meta name="author" content="A-cai">
  <meta name="keywords" content="html,css,javascript,jQuery,vue">
  <title>HTML - A-cai的blog</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/atom-one-dark.min.css" />
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_yg9cfy8wd6.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/blog/js/utils.js" ></script>
<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>A-cai的学习笔记</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/blog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container text-center white-text fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              
  <div class="mt-3 post-meta">
    <i class="iconfont icon-date-fill" aria-hidden="true"></i>
    <time datetime="2020-06-26 14:04">
      2020年6月26日 下午
    </time>
  </div>


<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      3.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      37
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <div class="post-content mx-auto" id="post">
            
              <p class="note note-info">
                
                  本文最后更新于：2020年6月19日 晚上
                
              </p>
            
            <article class="markdown-body">
              <h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h2 id="HTML5语义化"><a href="#HTML5语义化" class="headerlink" title="HTML5语义化"></a>HTML5语义化</h2><p>什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。</p>
<h4 id="好处"><a href="#好处" class="headerlink" title="好处"></a>好处</h4><ul>
<li>易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。</li>
<li>有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。</li>
<li>方便其他设备解析，如盲人阅读器根据语义渲染网页</li>
<li>有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。</li>
</ul>
<p><a href="http://www.daqianduan.com/6549.html" target="_blank" rel="noopener">http://www.daqianduan.com/6549.html</a></p>
<h2 id="为什么最好把-CSS-的-lt-link-gt-标签放在-lt-head-gt-lt-head-gt-之间？为什么最好把-JS-的-lt-script-gt-标签恰好放在-lt-body-gt-之前，有例外情况吗？"><a href="#为什么最好把-CSS-的-lt-link-gt-标签放在-lt-head-gt-lt-head-gt-之间？为什么最好把-JS-的-lt-script-gt-标签恰好放在-lt-body-gt-之前，有例外情况吗？" class="headerlink" title="为什么最好把 CSS 的&lt;link&gt;标签放在&lt;head&gt;&lt;/head&gt;之间？为什么最好把 JS 的&lt;script&gt;标签恰好放在&lt;/body&gt;之前，有例外情况吗？"></a>为什么最好把 CSS 的<code>&lt;link&gt;</code>标签放在<code>&lt;head&gt;&lt;/head&gt;</code>之间？为什么最好把 JS 的<code>&lt;script&gt;</code>标签恰好放在<code>&lt;/body&gt;</code>之前，有例外情况吗？</h2><p><strong>把<code>&lt;link&gt;</code>放在<code>&lt;head&gt;</code>中</strong></p>
<p>把<code>&lt;link&gt;</code>标签放在<code>&lt;head&gt;&lt;/head&gt;</code>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。</p>
<p><strong>把<code>&lt;script&gt;</code>标签恰好放在<code>&lt;/body&gt;</code>之前</strong></p>
<p>脚本在下载和执行期间会阻止 HTML 解析。把<code>&lt;script&gt;</code>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。</p>
<p>例外情况是当你的脚本里包含<code>document.write()</code>时。但是现在，<code>document.write()</code>不推荐使用。同时，将<code>&lt;script&gt;</code>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<code>&lt;script&gt;</code>使用<code>defer</code>属性，放在<code>&lt;head&gt;</code>中。</p>
<h2 id="什么是渐进式渲染（progressive-rendering）？"><a href="#什么是渐进式渲染（progressive-rendering）？" class="headerlink" title="什么是渐进式渲染（progressive rendering）？"></a>什么是渐进式渲染（progressive rendering）？</h2><p>渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。</p>
<p>在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。</p>
<p>一些举例：</p>
<ul>
<li>图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。</li>
<li>确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听<code>DOMContentLoaded</code>/<code>load</code>事件加载其他资源和内容。</li>
<li>异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在<a href="http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/" target="_blank" rel="noopener">这里</a>找到。</li>
</ul>
<h2 id="viewport"><a href="#viewport" class="headerlink" title="viewport"></a>viewport</h2><p>响应式的页面怎么做？</p>
<p>Viewport ：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。</p>
<p>在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。<br>举个例子：如果我们的屏幕是320像素 * 480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。</p>
<p>为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。</p>
<h3 id="Viewport属性值"><a href="#Viewport属性值" class="headerlink" title="Viewport属性值"></a>Viewport属性值</h3><ul>
<li>width    设置layout viewport 的宽度，为一个正整数，或字符串”width-device”</li>
<li>initial-scale    设置页面的初始缩放值，为一个数字，可以带小数</li>
<li>minimum-scale    允许用户的最小缩放值，为一个数字，可以带小数</li>
<li>maximum-scale    允许用户的最大缩放值，为一个数字，可以带小数</li>
<li>height    设置layout viewport 的高度，这个属性对我们并不重要，很少使用</li>
<li>user-scalable    是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。</li>
</ul>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="Reflow和Repaint"><a href="#Reflow和Repaint" class="headerlink" title="Reflow和Repaint"></a>Reflow和Repaint</h2><h4 id="Reflow"><a href="#Reflow" class="headerlink" title="Reflow"></a>Reflow</h4><p>当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。</p>
<h4 id="Repaint"><a href="#Repaint" class="headerlink" title="Repaint"></a>Repaint</h4><p>当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。</p>
<h4 id="引起Repaint和Reflow的一些操作"><a href="#引起Repaint和Reflow的一些操作" class="headerlink" title="引起Repaint和Reflow的一些操作"></a>引起Repaint和Reflow的一些操作</h4><ul>
<li>调整窗口大小</li>
<li>字体大小</li>
<li>样式表变动</li>
<li>元素内容变化，尤其是输入控件</li>
<li>CSS伪类激活，在用户交互过程中发生</li>
<li>DOM操作，DOM元素增删、修改</li>
<li>width, clientWidth, scrollTop等布局宽高的计算</li>
</ul>
<h4 id="Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议："><a href="#Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：" class="headerlink" title="Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议："></a>Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：</h4><ul>
<li>避免逐条更改样式。建议集中修改样式，例如操作className。</li>
<li>避免频繁操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后添加到文档里。设置display:none的元素上操作，最后显示出来。</li>
<li>避免频繁读取元素几何属性（例如scrollTop）。绝对定位具有复杂动画的元素。</li>
<li>绝对定位使它脱离文档流，避免引起父元素及后续元素大量的回流</li>
</ul>
<p><a href="https://harttle.land/2015/08/11/reflow-repaint.html" target="_blank" rel="noopener">https://harttle.land/2015/08/11/reflow-repaint.html</a><br><br><a href="http://www.blueidea.com/tech/web/2011/8365.asp" target="_blank" rel="noopener">http://www.blueidea.com/tech/web/2011/8365.asp</a></p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="img中的alt和元素的title属性作用"><a href="#img中的alt和元素的title属性作用" class="headerlink" title="img中的alt和元素的title属性作用"></a>img中的alt和元素的title属性作用</h2><ul>
<li>img的alt属性<br><br>如果无法显示图像，浏览器将显示alt指定的内容</li>
<li>元素title属性<br><br>在鼠标移到元素上时显示title的内容</li>
</ul>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="href和src区别"><a href="#href和src区别" class="headerlink" title="href和src区别"></a>href和src区别</h2><ul>
<li>href <br><br>href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系<br><br>若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。</li>
<li>src <br><br>src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。<br><br>当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。</li>
</ul>
<p><a href="https://blog.csdn.net/lhjuejiang/article/details/80795081" target="_blank" rel="noopener">https://blog.csdn.net/lhjuejiang/article/details/80795081</a></p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="浏览器的渲染过程"><a href="#浏览器的渲染过程" class="headerlink" title="浏览器的渲染过程"></a>浏览器的渲染过程</h2><p>我输入浏览器<a href="http://baidu.com回车之后，到整个百度页面显示在你的面前，请问整个过程具体是怎么样的？">http://baidu.com回车之后，到整个百度页面显示在你的面前，请问整个过程具体是怎么样的？</a></p>
<div class="hljs"><pre><code class="hljs jboss-cli">域名服务器解析域名
发送http请求给WEB服务器
web接受请求
解析请求路径<span class="hljs-string">/cookie</span>
返回相对应的页面数据html/json

浏览器解析HTML
将HTML解析成 dom树对象
解析出资源路径，发送请求资源文件（css文件<span class="hljs-string">/js</span>文件<span class="hljs-string">/json</span>文件/图片）
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
遍历渲染树开始布局，计算每个节点的位置大小信息。
将渲染树每个节点绘制到屏幕。</code></pre></div>



<ol>
<li>解析HTML生成DOM树。</li>
<li>解析CSS生成CSSOM规则树。</li>
<li>将DOM树与CSSOM规则树合并在一起生成渲染树。</li>
<li>遍历渲染树开始布局，计算每个节点的位置大小信息。</li>
<li>将渲染树每个节点绘制到屏幕。</li>
</ol>
<p><a href="https://baijiahao.baidu.com/s?id=1593097105869520145&amp;wfr=spider&amp;for=pc" target="_blank" rel="noopener">https://baijiahao.baidu.com/s?id=1593097105869520145&amp;wfr=spider&amp;for=pc</a></p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="为何会出现浏览器兼容问题"><a href="#为何会出现浏览器兼容问题" class="headerlink" title="为何会出现浏览器兼容问题"></a>为何会出现浏览器兼容问题</h2><ul>
<li>同一产品，版本越老 bug 越多</li>
<li>同一产品，版本越新，功能越多</li>
<li>不同产品，不同标准，不同实现方式<h3 id="处理兼容问题的思路"><a href="#处理兼容问题的思路" class="headerlink" title="处理兼容问题的思路"></a>处理兼容问题的思路</h3></li>
</ul>
<ol>
<li>要不要做</li>
</ol>
<ul>
<li>产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）</li>
<li>成本的角度 (有无必要做某件事)</li>
</ul>
<p>2.做到什么程度</p>
<ul>
<li>让哪些浏览器支持哪些效果</li>
</ul>
<p>3..如何做</p>
<ul>
<li>根据兼容需求选择技术框架/库(jquery)</li>
<li>根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)</li>
<li>条件注释、CSS Hack、js 能力检测做一些修补</li>
<li>渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验</li>
<li>优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</li>
</ul>
<p><a href="https://github.com/jirengu/frontend-interview/issues/35" target="_blank" rel="noopener">https://github.com/jirengu/frontend-interview/issues/35</a></p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="doctype有什么用"><a href="#doctype有什么用" class="headerlink" title="doctype有什么用"></a>doctype有什么用</h2><p>doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。</p>
<!DOCTYPE><p>声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。</p>
<!DOCTYPE><p>声明必须是HTML文档的第一行，位于html标签之前。</p>
<p>浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过doctype来区分这两种模式，doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在html开头使用doctype。</p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="行内元素和块级元素有哪些"><a href="#行内元素和块级元素有哪些" class="headerlink" title="行内元素和块级元素有哪些"></a>行内元素和块级元素有哪些</h2><h3 id="行内元素"><a href="#行内元素" class="headerlink" title="行内元素"></a>行内元素</h3><p>一个行内元素只占据它对应标签的边框所包含的空间<br><br>一般情况下，行内元素只能包含数据和其他行内元素</p>
<div class="hljs"><pre><code class="hljs stylus"><span class="hljs-selector-tag">b</span>, big, <span class="hljs-selector-tag">i</span>, small, tt
<span class="hljs-selector-tag">abbr</span>, acronym, <span class="hljs-selector-tag">cite</span>, <span class="hljs-selector-tag">code</span>, <span class="hljs-selector-tag">dfn</span>, <span class="hljs-selector-tag">em</span>, <span class="hljs-selector-tag">kbd</span>, <span class="hljs-selector-tag">strong</span>, <span class="hljs-selector-tag">samp</span>, var
<span class="hljs-selector-tag">a</span>, bdo, br, <span class="hljs-selector-tag">img</span>, map, <span class="hljs-selector-tag">object</span>, <span class="hljs-selector-tag">q</span>, script, <span class="hljs-selector-tag">span</span>, sub, sup
<span class="hljs-selector-tag">button</span>, <span class="hljs-selector-tag">input</span>, <span class="hljs-selector-tag">label</span>, select, textarea</code></pre></div>
<h3 id="块级元素"><a href="#块级元素" class="headerlink" title="块级元素"></a>块级元素</h3><p>占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签<br></p>
<div class="hljs"><pre><code class="hljs stylus"><span class="hljs-selector-tag">header</span>,<span class="hljs-selector-tag">form</span>,<span class="hljs-selector-tag">ul</span>,<span class="hljs-selector-tag">ol</span>,<span class="hljs-selector-tag">table</span>,<span class="hljs-selector-tag">article</span>,<span class="hljs-selector-tag">div</span>,hr,<span class="hljs-selector-tag">aside</span>,<span class="hljs-selector-tag">figure</span>,<span class="hljs-selector-tag">canvas</span>,<span class="hljs-selector-tag">video</span>,<span class="hljs-selector-tag">audio</span>,footer</code></pre></div>

<p><a href="#HTML">回到顶部</a></p>
<h2 id="iframe框架有哪些优缺点"><a href="#iframe框架有哪些优缺点" class="headerlink" title="iframe框架有哪些优缺点"></a>iframe框架有哪些优缺点</h2><h4 id="优点："><a href="#优点：" class="headerlink" title="优点："></a>优点：</h4><ul>
<li><p>iframe能够原封不动的把嵌入的网页展现出来。</p>
</li>
<li><p>如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。</p>
</li>
<li><p>网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。</p>
</li>
<li><p>如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。</p>
<h4 id="缺点："><a href="#缺点：" class="headerlink" title="缺点："></a>缺点：</h4></li>
<li><p>搜索引擎的爬虫程序无法解读这种页面</p>
</li>
<li><p>框架结构中出现各种滚动条</p>
</li>
<li><p>使用框架结构时，保证设置正确的导航链接。</p>
</li>
<li><p>iframe页面会增加服务器的http请求</p>
</li>
</ul>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="label标签有什么作用"><a href="#label标签有什么作用" class="headerlink" title="label标签有什么作用"></a>label标签有什么作用</h2><p><code>label</code> 标签通常是写在表单内，它关联一个控件，使用 <code>label</code> 可以实现点击文字选取对应的控件。</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"test"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"test"</span> &gt;</span>test<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></code></pre></div>

<p><a href="#HTML">回到顶部</a></p>
<h2 id="HTML5的form如何关闭自动完成功能"><a href="#HTML5的form如何关闭自动完成功能" class="headerlink" title="HTML5的form如何关闭自动完成功能"></a>HTML5的form如何关闭自动完成功能</h2><p>将不想要自动完成的 <code>form</code> 或 <code>input</code> 设置为 <code>autocomplete=off</code></p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion" target="_blank" rel="noopener">MDN</a></p>
<p><a href="#HTML">回到顶部</a></p>
<h2 id="DOM和BOM有什么区别"><a href="#DOM和BOM有什么区别" class="headerlink" title="DOM和BOM有什么区别"></a>DOM和BOM有什么区别</h2><ul>
<li>DOM</li>
</ul>
<p>Document Object Model，文档对象模型</p>
<p>DOM 是为了操作文档出现的 API，document 是其的一个对象</p>
<p>DOM和文档有关，这里的文档指的是网页，也就是html文档。DOM和浏览器无关，他关注的是网页本身的内容。</p>
<ul>
<li>BOM</li>
</ul>
<p>Browser Object Model，浏览器对象模型</p>
<p>BOM 是为了操作浏览器出现的 API，window 是其的一个对象</p>
<p>window 对象既为 javascript 访问浏览器提供API，同时在 ECMAScript 中充当 Global 对象</p>
<p><a href="#HTML">回到顶部</a></p>

            </article>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/blog/2020/06/26/HTTP/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">HTTP</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                      <a href="/blog/2020/06/26/CSS/">
                        <span class="hidden-mobile">CSS</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </div>
                </div>
              
            </div>

            
              <!-- Comments -->
              <div class="comments" id="comments">
                
                

              </div>
            
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/blog/js/debouncer.js" ></script>
<script  src="/blog/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/lazyload.js" ></script>
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/blog/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: 'article.markdown-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "HTML&nbsp;",
      ],
      cursorChar: "|",
      typeSpeed: 70,
      loop: true,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/blog/js/local-search.js" ></script>
  <script>
    var path = "/blog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>







  
  
    <script>
      !function (e, t, a) {
        function r() {
          for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
          requestAnimationFrame(r)
        }

        function n() {
          var t = "function" == typeof e.onclick && e.onclick;
          e.onclick = function (e) {
            t && t(), o(e)
          }
        }

        function o(e) {
          var a = t.createElement("div");
          a.className = "heart", s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
          }), t.body.appendChild(a)
        }

        function i(e) {
          var a = t.createElement("style");
          a.type = "text/css";
          try {
            a.appendChild(t.createTextNode(e))
          } catch (t) {
            a.styleSheet.cssText = e
          }
          t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
          return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }

        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
          setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
    </script>
  













</body>
</html>
